

<script setup>
import { nextTick, onMounted,defineProps,watch } from 'vue'


onMounted(() => {
    nextTick(() => {
        initMap()
    })
    

})
let obj=defineProps(['mapres'])


var clickHandler = function (evt) {
    var lat = evt.latLng.getLat().toFixed(6);
    var lng = evt.latLng.getLng().toFixed(6);
    console.log("您点击的的坐标是：" + lat + "," + lng);
}

const initMap = () => {
    //定义地图中心点坐标
    var center = new TMap.LatLng(39.984120, 116.307484)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    var map = new TMap.Map(document.getElementById('tx_map_d'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45    //设置地图旋转角度
    });
    watch(obj,()=>{
    var coords = [
                new TMap.LatLng(obj.mapres.mapx1,obj.mapres.mapx2),
                new TMap.LatLng(obj.mapres.mapy1,obj.mapres.mapy2),
                new TMap.LatLng(obj.mapres.mapz1,obj.mapres.mapz2)
            ]
            //创建LatLngBounds实例
            var latlngBounds = new TMap.LatLngBounds();
            //将坐标逐一做为参数传入extend方法，latlngBounds会根据传入坐标自动扩展生成
            for (var i = 0; i < coords.length; i++) {
                latlngBounds.extend(coords[i]);
            }
            //调用fitBounds自动调整地图显示范围

            map.fitBounds(latlngBounds);
            
            var center = new TMap.LatLng(obj.mapres.mapcenter1,obj.mapres.mapcenter2);//设置中心点坐标
            
            map.on("click", clickHandler)
            // 创建点聚合实例
            var markerCluster = new TMap.MarkerCluster({
                id: 'cluster',
                map: map,
                enableDefaultStyle: true, // 启用默认样式
                minimumClusterSize: 2, // 形成聚合簇的最小个数
                geometries: [{ // 点数组
                    position: new TMap.LatLng(obj.mapres.mapcenter1,obj.mapres.mapcenter2)
                },
                {
                    position: new TMap.LatLng(39.864795, 116.343253)
                },
                {
                    position: new TMap.LatLng(39.854017, 116.356216)
                },
        {
            position: new TMap.LatLng(39.845751,116.325576)
        },
        {
            position: new TMap.LatLng(39.838028, 116.322821)
        },
        {
            position: new TMap.LatLng(39.984104, 116.307503)
        },
        {
            position: new TMap.LatLng(39.908802, 116.397502)
        },
        {
            position: new TMap.LatLng(40.040417, 116.273514)
        },
        {
            position: new TMap.LatLng(29.549297, 106.570883)
        },
        ],
        zoomOnClick: true, // 点击簇时放大至簇内点分离
        gridSize: 60, // 聚合算法的可聚合距离
        averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 10 // 采用聚合策略的最大缩放级别
    });
  
})
}


</script>

<template>
    <div class="mapbox">
        <div class="map" id="tx_map_d"></div>
    </div>
</template>


<style>
.mapbox {
    width: 40%;
    height: 650px;
    position: absolute;
    bottom: 0;
    right: 0;
    position: fixed;

}

.map {
    height: 100%;
}
</style>